<script setup lang='ts'>import { InputHTMLAttributes, onMounted, ref, watch } from 'vue';
import hisItem from '../HistoriesItem/index.vue'

const inputPlaceholder = ref('NCT x BLACKPINK？这路演再来亿遍')


const searchContentRef = ref<HTMLElement>()
const inputClick = (e: Event) => {
    let dom = searchContentRef.value as HTMLElement
    dom.style.background = 'var(--graph_bg_thick)'
    isActive.value = true
}

const hisList = ref<string[]>(
    [
        'vue',
        'ts',
        'vite',
        '前端面试',
        'cdn加速',
        'vue实战项目',
        'vue面试',
        'react',
        'angular',
        'angular',
        'angular',
        'angular',
        'angular'
    ]
)
const removeHis = (e: string) => {
    const index = hisList.value.indexOf(e)
    hisList.value.splice(index, 1)
}

const cleanHis = () => {
    hisList.value.splice(0, hisList.value.length)
}
const searchCleanRef = ref<HTMLElement>()
const onInput = (e: Event) => {
    const dom = e.target as HTMLInputElement
    if (dom.value.length > 0) {
        (searchCleanRef.value as HTMLElement).classList.add('has-keyword')
    } else {
        (searchCleanRef.value as HTMLElement).classList.remove('has-keyword')
    }

}

const inputRef = ref<HTMLElement>()
const inputClean = () => {
    (inputRef.value as HTMLInputElement).value = '';
    (searchCleanRef.value as HTMLElement).classList.remove('has-keyword')
}
const searchBarRef = ref<HTMLElement>()
const isActive = ref(false)
onMounted(() => {
    document.addEventListener('mousedown', (e: Event) => {
        const dom = e.target as HTMLElement

        if (!searchBarRef.value) return

        if (!(searchBarRef.value as HTMLElement).contains(dom)) {
            isActive.value = false
        }
        // console.log(dom)
        // console.log(searchBarRef.value)
        // console.log((searchBarRef.value as HTMLElement).contains(dom))
    })
})
const leftHotList = ref([
    {
        text: '游戏王作者因救人溺亡',
        icon: 'new'
    },
    {
        text: '日本发射火箭失败',
        icon: 'none'
    },
    {
        text: '他在CPU你是什么梗',
        icon: 'hot'
    },
    {
        text: '守望补偿玩家死神皮肤',
        icon: 'hot'
    },
    {
        text: '大司马九子夺嫡',
        icon: 'new'
    }
])
const rightHotList = ref([
    {
        text: '北约将进行核震慑演习',
        icon: 'hot'
    },
    {
        text: '俄称克里米亚大桥恐袭测或者巴拉巴拉巴拉asdfasdfa',
        icon: 'none'
    },
    {
        text: '伤害自来水供应正常有序',
        icon: 'none'
    },
    {
        text: '湖南洞穴发现大熊猫化石',
        icon: 'none'
    },
    {
        text: 'TI11突围赛决赛日',
        icon: 'none'
    }
])
</script>
<template>
    <div class="center-search-box">
        <div class="center-search-bar" ref="searchBarRef">
            <form id="nav-search-form" :style="isActive?'border-radius:8px 8px 0 0':''">
                <div class="nav-search-content" ref="searchContentRef">
                    <input class="nav-search-input" type="text" :placeholder="inputPlaceholder"
                        :title="inputPlaceholder" @click="inputClick" @input="onInput" ref="inputRef">
                    <div class="nav-search-clean" ref="searchCleanRef" @click="inputClean">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
                                fill="#C9CCD0"></path>
                        </svg>
                    </div>
                </div>
                <div class="nav-search-btn"><span class="iconfont icon-sousuo"></span></div>
            </form>
            <div class="search-panel" v-if="isActive">
                <div class="search-history" v-if="hisList.length>0">
                    <div class="header">
                        <div class="title">搜索历史</div>
                        <div class="clean-btn" @click="cleanHis">清空</div>
                    </div>
                    <div class="histories-wrap">
                        <div class="histories">
                            <his-item v-for="item in hisList" :key="item" :text="item" @close-his-item="removeHis">
                            </his-item>
                        </div>
                    </div>
                </div>
                <div class="search-hot">
                    <div class="header">
                        <div class="title">热搜</div>
                    </div>
                    <div class="hots-double">
                        <div class="hots-col">
                            <div class="hot-item" v-for="(item, index) in leftHotList" :key="item.text">
                                <div class="hots-rank" :class="index<3?'search-rank-top':''">{{index+1}}</div>
                                <div class="hots-text">{{item.text}}</div>
                                <img class="hots-mark" :src="'/src/img/icon/'+item.icon+'.png'" alt=""
                                    v-if="item.icon!=='none'">
                            </div>
                        </div>
                        <div class="hots-col">
                            <div class="hot-item" v-for="(item, index) in rightHotList" :key="item.text">
                                <div class="hots-rank">{{index+6}}</div>
                                <div class="hots-text">{{item.text}}</div>
                                <img class="hots-mark" :src="'/src/img/icon/'+item.icon+'.png'" alt=""
                                    v-if="item.icon!=='none'">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='less' scoped>
.center-search-box {
    width: 100%;

    // background-color: antiquewhite;
    .center-search-bar {
        max-width: 500px;
        min-width: 110px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;


        #nav-search-form {
            overflow: hidden;
            background-color: var(--graph_bg_regular);
            border-radius: 8px;
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 48px 0 4px;
            transition: background-color .3s;
            border: 1px solid var(--line_regular);

            &:hover {
                background-color: #fff !important;
            }

            .nav-search-content {
                flex: 1 auto;
                height: 32px;
                display: flex;
                align-items: center;
                padding: 0 8px;
                border-radius: 6px;

                .nav-search-input {
                    flex: 1;
                    height: 100%;
                    background: none;
                    outline: none;
                    border: none;
                }

                .nav-search-clean {
                    visibility: hidden;
                    width: 16px;
                    height: 16px;
                    right: 10px;
                    cursor: pointer;
                }

                .has-keyword {
                    visibility: inherit;
                }
            }

            .nav-search-btn {
                padding: 20px;
                position: absolute;
                z-index: 999;
                right: 0;
            }
        }

        .search-panel {
            position: absolute;
            width: 100%;
            background-color: #fff;
            border-radius: 0 0 6px 6px;
            padding: 16px 0 18px;
            border: 1px solid var(--line_regular);
            border-top: none;
            box-sizing: border-box;

            .header {
                display: flex;
                justify-content: space-between;
                padding: 0 15px;
                align-items: cneter;

                .title {
                    font-size: 16px;
                    line-height: 24px;
                }

                .clean-btn {
                    color: var(--text3);
                    font-size: 12px;
                    cursor: pointer;

                    &:hover {
                        color: skyblue;
                    }
                }
            }

            .histories-wrap {
                max-height: 92px;
                padding: 0 16px;

                .histories {
                    margin-top: 12px;
                    margin-bottom: 4px;
                    margin-right: -10px;
                    display: flex;
                    flex-wrap: wrap;
                }
            }

            .search-hot {

                .hots-double {
                    display: flex;

                    .hots-col:first-child {
                        margin-right: 10px;
                    }

                    .hots-col {
                        flex: 1;
                        // background-color: aqua;
                        flex-shrink: 0;
                        max-width: 244px;

                        .hot-item {
                            height: 38px;
                            display: flex;
                            align-items: center;
                            padding-left: 16px;
                            cursor: pointer;
                            box-sizing: border-box;

                            .hots-rank {
                                width: 15px;
                                height: 17px;
                                line-height: 17px;
                                font-size: 14px;
                                text-align: center;
                                margin-right: 7px;
                                color: var(--text3)
                            }

                            .search-rank-top {
                                color: var(--text1)
                            }

                            .hots-text {
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                font-size: 14px;
                                height: 17px;
                                line-height: 17px;
                                margin-right: 6px;
                            }

                            .hots-mark {
                                width: 14px;
                                height: 14px;
                                margin-right: 16px;
                                vertical-align: middle;

                            }
                        }
                    }
                }
            }
        }
    }

}
</style>